<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <!--1. v-model用在html标签上，会自动绑定value属性，并监听input事件 -->
    <!-- <input type="text" v-model="username" />
    <input
      type="text"
      :value="username"
      @input="username = (<HTMLInputElement>$event.target).value"
    /> -->
    <!--2. v-model用在组件上，会自动绑定value属性，并监听input事件 -->
    <wInput v-model="username" />

    <wInput
      :modelValue="username"
      @update:modelValue="username = $event"
    ></wInput>

    <!-- vue2 v-model双向绑定 底层ui写法 :value与@input -->
    <!-- <wInput :value="username" @input="username = $event"></wInput> -->

    <!-- 修改v-model -->
    <!-- <wInput v-model:qwe="username" /> -->
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from "vue";
import wInput from "./wInput.vue";
const username = ref("zhangsan");
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}
</style>
